window.addEventListener('load', function () {
    var focus = this.document.querySelector('.focus');
    var focusUl = focus.querySelector('ul');
    var focusUlLi = focusUl.querySelectorAll('li');
    var focusOl = focus.querySelector('ol');

    var speed = 3000;
    var Cindex = 0;
    var startX = null;
    var moveX = null;
    var focusWidth = focusUlLi[0].offsetWidth;
    var focusUlLiCount = focusUlLi.length;
    var createFlag = true;

    //动态创建li
    for(var i = 0;i<focusUl.children.length;i++){
        var cLi = this.document.createElement('li');
        focusOl.appendChild(cLi)
    }
    focusOl.children[0].classList.add('current');

    var timer = this.setInterval(function () {
        Cindex++;
        console.log(Cindex);
        if (Cindex > focusUlLiCount - 1) {
            Cindex = 0
        }
        focusUl.style.transition = 'all .3s';
        focusUl.style.transform = 'translateX(' + (-Cindex * focusWidth) + 'px)';

    }, speed)

    focusUl.addEventListener('transitionend', function () {
        focusOl.querySelector('.current').classList.remove('current');
        focusOl.children[Cindex].classList.add('current');
    })

    focusUl.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        startX = e.targetTouches[0].pageX;
    })

    focusUl.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - startX;

        if (Cindex <= 0 && moveX > 0) {
            if (createFlag) {
                createFlag = false;
                var cLi = focusUl.children[focusUl.children.length - 1].cloneNode(true);
                focusUl.insertBefore(cLi, focusUl.children[0]);
            }
            if (!createFlag) {
                if (Cindex <= 0) {
                    focusUl.style.transition = 'none';
                    focusUl.style.transform = 'translateX(' + ((-(Cindex + 1) * focusWidth) + moveX) + 'px)';
                }
            }
        }

        if (Cindex >= focusUlLiCount - 1 && moveX < 0) {
            if (createFlag) {
                createFlag = false;
                var cLi = focusUl.children[0].cloneNode(true);
                // focusUl.insertBefore(cLi, focusUl.children[0]);
                focusUl.appendChild(cLi)
            }
            if (!createFlag) {
                if (Cindex >= focusUlLiCount - 1) {
                    focusUl.style.transition = 'none';
                    focusUl.style.transform = 'translateX(' + ((-(focusUlLiCount - 1) * focusWidth) + moveX) + 'px)';
                }
            }
        }

        if (createFlag) {
            focusUl.style.transition = 'none';
            focusUl.style.transform = 'translateX(' + ((-Cindex * focusWidth) + moveX) + 'px)';
        }

    })

    focusUl.addEventListener('touchend', function () {
        if (Math.abs(moveX) > 10) {
            if (moveX > 0) {
                Cindex--;
            } else {
                Cindex++;
            }

            if (Cindex < 0) {
                Cindex = focusUlLiCount - 1
                if (!createFlag) {
                    focusUl.removeChild(focusUl.children[0]);
                }
            }
            if (Cindex > focusOl.children.length - 1) {
                Cindex = 0
                if (!createFlag) {
                    focusUl.removeChild(focusUl.children[focusUl.children.length-1]);
                }
            }

            if (!createFlag) {
                focusOl.querySelector('.current').classList.remove('current');
                focusOl.children[Cindex].classList.add('current');
                focusUl.style.transition = 'none';
                focusUl.style.transform = 'translateX(' + (-Cindex * focusWidth) + 'px)';       
            }

            if (createFlag) {
                focusUl.style.transition = 'all .3s';
                focusUl.style.transform = 'translateX(' + (-Cindex * focusWidth) + 'px)';    
            }
            createFlag = true;
        }

        timer = setInterval(function () {
            var focusWidth = focusUlLi[0].offsetWidth;
            Cindex++;
            if (Cindex >= focusUlLi.length) {
                Cindex = 0
            }
            focusUl.style.transition = 'all .3s';
            focusUl.style.transform = 'translateX(' + (-Cindex * focusWidth) + 'px)';
        }, speed)

    })

});